<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./night..css">
</head>

<body>
    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            var oLi = document.querySelectorAll('li');
            var body = document.getElementsByTagName("body")[0];
            var arr = ['yellow', 'green', 'blue', 'red', 'pink', 'orange', 'aqua', 'wheat', 'greenyellow']
            oLi.forEach(function(item, index) {
                item.style.backgroundColor = arr[index];
                item.addEventListener('selectstart', function(e) {
                    e.preventDefault();
                })

            })
            for (var i = 0; i < oLi.length; i++) {
                oLi[i].style.left = 210 * (i % 3) + 10 + 'px';
                oLi[i].style.top = 210 * Math.floor(i / 3) + 10 + 'px';
                oLi[i].index = i;
                oLi[i].onmousedown = function() {
                    var t = this;
                    t.style.transition = "";
                    this.className = "active";
                    document.onmousemove = function(e) {
                        var e = e || window.event;
                        var nl = e.pageX - box.offsetLeft - box.clientLeft - t.offsetWidth / 2;;
                        var nt = e.pageY - box.offsetTop - box.clientTop - t.offsetHeight / 2;
                        var maxl = box.clientWidth - t.offsetWidth;
                        var maxt = box.clientHeight - t.offsetHeight;
                        nl = Math.min(maxl, Math.max(0, nl));
                        nt = Math.min(maxt, Math.max(0, nt));
                        t.style.left = nl + "px";
                        t.style.top = nt + 'px';
                    };
                    document.onmouseup = function() {
                        for (var j = 0; j < oLi.length; j++) {
                            if (t != oLi[j] &&
                                t.offsetLeft + t.offsetWidth > oLi[j].offsetLeft + oLi[j].offsetWidth / 2 &&
                                t.offsetTop + t.offsetHeight > oLi[j].offsetTop + oLi[j].offsetHeight / 2 &&
                                t.offsetLeft < oLi[j].offsetLeft + oLi[j].offsetWidth / 2 &&
                                t.offsetTop < oLi[j].offsetTop + oLi[j].offsetHeight / 2
                            ) {
                                oLi[j].style.transition = "all 200ms linear";
                                oLi[j].style.zIndex = "6";
                                var a = t.index;
                                oLi[j].style.left = 210 * (a % 3) + 10 + "px";
                                oLi[j].style.top = 210 * Math.floor(a / 3) + 10 + "px";
                                t.index = oLi[j].index;
                                oLi[j].index = a;
                            }
                        }
                        document.onmousemove = null;
                        document.onmouseup = null;
                        t.className = '';
                        t.style.left = 210 * (t.index % 3) + 10 + 'px';
                        t.style.top = 210 * Math.floor(t.index / 3) + 10 + 'px';
                    };
                };
            }
        }
    </script>
    <ul id="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

</body>

</html>